<template>
	<view class="sex-picker-wrapper">
		<u-popup :show="show" @close="close" round="12px">
			<view class="select-date-popup">
				<view class="header-btns">
					<view class="cancel-btn" @click="close">
						<text>取消</text>
					</view>
					<view class="confirm-btn" @click="selectDateConfirm">
						<text>确定</text>
					</view>
				</view>
				<picker-view mask-class="mask-wrap" :indicator-style="indicatorStyle" :value="value"
					@change="bindChange" class="picker-view box">
					<picker-view-column>
						<view class="item" v-for="(item,index) in list" :key="index">{{item.label}}</view>
					</picker-view-column>
					<picker-view-column>
						<view class="item" v-for="(item,index) in cityList" :key="index">{{item.label}}</view>
					</picker-view-column>
				</picker-view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	const allData = []
	export default {
		props: ['show'],
		mounted() {
			this.initData()
		},
		methods: {
			async initData() {
				const resp = await this.$request({
					url: '/index/region',
				})
				const { code, data } = resp
				if (code !== 1) return
				if (!!data && data.length) {
					allData.splice(0, allData.length, ...data)
					this.initFirstCol(data)
				}
			},
			initFirstCol(list) {
				const [first] = list
				const { children } = first
				let cityList = []
				if (!!children && children.length) {
					cityList = children.map(item => {
						const { code, name } = item
						return { label: name, value: code }
					})
				}
				const data = list.map(item => {
					const { code, name } = item
					return { value: code, label: name }
				})
				this.list = data
				this.cityList = cityList
				const [targetItem] = data
				const [targetCity] = cityList
				this.currentValue = `${targetItem.label}-${targetCity.label}`
				this.currentCode = `${targetItem.value},${targetCity.value}`
			},
			bindChange(ev) {
				const [value, cityValue] = ev.detail.value
				const { list } = this
				const targetItem = list[value]
				const { value: code } = targetItem
				const target = allData.find(item => item.code === code)
				if (!target) return
				const { children } = target
				if (!!children && children.length) {
					this.cityList = children.map(item => {
						const { code, name } = item
						return { value: code, label: name }
					})
				}
				const cityTarget = this.cityList[cityValue]
				if (!cityTarget) return
				this.currentValue = `${targetItem.label}-${cityTarget.label}`
				this.currentCode = `${targetItem.value},${cityTarget.value}`
				this.value = [value, cityValue]
			},
			selectDateConfirm() {
				this.$emit('confirm', { value: this.currentValue, code: this.currentCode })
			},
			close() {
				this.$emit('close')
			},
		},
		data() {
			return {
				currentValue: '',
				currentCode: '',
				indicatorStyle: `height: 50px;`,
				value: [0, 0],
				list: [],
				cityList: [],
			}
		}
	}
</script>

<style lang="scss" scoped>
	.sex-picker-wrapper {
		.header-btns {
			display: flex;
			justify-content: space-between;
			padding: 24rpx 32rpx;
			box-sizing: border-box;
			font-size: 26rpx;
			align-items: center;

			.cancel-btn {
				color: rgb(25, 25, 25);
			}

			.confirm-btn {
				color: #FFF;
				padding: 12rpx 24rpx;
				border-radius: 32rpx;
				background: rgb(35, 121, 255);

			}
		}

		.picker-view {
			width: 750rpx;
			height: 650rpx;
		}

		.item {
			line-height: 100rpx;
			text-align: center;
		}
	}
</style>